<template>
	<view >
		<uni-nav-bar
			statusBar="true"
		   border="none" title="质押" right-text="记录" @clickRight="onClickRight()"
			background-color="transparent" color="#000000"></uni-nav-bar>


		<view class="econemy">
			<view class="cell_1">
				<view class="left">
					<view class="black_1">
						绿色积分
					</view>
					<view class="black_2">
						{{Number(user.new_green_account).toFixed(2)}}
					</view>
				</view>
				<view class="right">
					<image src="../../static/economy/num.png" mode=""></image>
				</view>
			</view>
			<view class="cell_2">
				选择质押天数
			</view>
			<view class="cell_3">
				解锁更多绿色积分
			</view>
			<view class="cell_4">
				<template v-for="(item,index) in list">
					<view  @click="goPay(item)" class="item" :class="'item_'+((index+1) %4)">
						<view class="left">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="middle">
							<view class="text1" :style="'color:'+item.color">
								{{item.name}}
							</view>
							<view class="text2" :style="'color:'+item.color">
								{{item.desc}}
							</view>
						</view>
						<view class="right">
							<view class="text1" :style="'background-color:' +(colorArr[index%colorArr.length])">
								选它
							</view>
						</view>
					</view>
					
				</template>
			</view>
			<view class="cell_5">
				ZY解锁将退回账户
			</view>
			<view class="cell_6">
				<text>*</text>绿色积分可以去中应APP提现
			</view>
		</view>
		
		<!-- <rule ref="rule"></rule> -->
		<economyPay3 ref="economyPay" ></economyPay3>
	</view>
</template>

<script>
	import rule from '@/components/rule/rule.vue'
	import economyPay3 from '@/components/pay/economyPay3.vue'
	export default {
		components:{
			rule,
			economyPay3
		},
		data() {
			return {
				today_unit_price:0,
				current: 0,
				colorArr:['#7FD1AB','#D1A37F','#7FC0D1'],
				list:[
				],
				user: {
					"mobile": "",
					        "nick_name": "",
					        "invite_code": "",
					        "id": 0,
					        "avatar": "",
					        "new_green_account": "",
					        "new_stock_account": ""
				},
			};
		},
		onShow() {
			this.api.http.requests('exchange/listCount', {
				type: 'buy'
			}, res => {
				uni.showToast({
					title: res
				});
				if (res.data) {
					try{
						this.today_unit_price = Number( res.data.today_unit_price.split("~")[0])
						if(!this.today_unit_price){
							this.today_unit_price = res.data.today_unit_price
						}
					}catch(e){
						//TODO handle the exception
						this.today_unit_price = res.data.today_unit_price
					}
					// if(res.data.today_unit_price.includes('-')) {
						
					// }else {
					// 	this.today_unit_price = res.data.today_unit_price
					// }					
				}
			
			}, "POST")
			this.api.http.requests('pledgeshop/lists', {}, res => {
				if(res.data && res.data.length > 0){
					this.list = (res.data) 
				}
			}, "POST")
			this.userInfo()
		},
		methods: {
			userInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					if(res.data){
							that.user = res.data
							try{
								let index = that.user .new_green_account.indexOf('.')
								let index2 = that.user .new_stock_account.indexOf('.')
								that.user .new_green_account = that.user .new_green_account.slice(0,index+3)
								that.user .new_stock_account = that.user .new_stock_account.slice(0,index2+3)
							}catch(e){
								
							}
					}
				
				}, "POST")
			},
			onClickRight() {
				uni.navigateTo({
					url: '/pages/economy/record'
				})
			},
			charts() {
				uni.navigateTo({
					url: '/pages/economy/theCharts'
				})
			},
			goPay(item){
				this.$refs.economyPay.open(item,this.today_unit_price)
				// this.$refs.economyPay.open()
			},
			showLule(){
				this.$refs.rule.open('u_jackpot_rule')
			},
			select(index){
				this.current = index
			}
			
		}
	}
</script>

<style lang="less">
	page {
		width: 750rpx;
		height: 100%;
		// background: url(@/static/economy/bg.png) no-repeat;
		background-size: 100% 100%;
	}

  .cell_1{
	  display: flex;
	  justify-content: space-between;
	  .left{
		  margin: auto;
		  font-size: 17px;
		  font-weight: 400;
		  color: #2D2D2D;
		  .black_2{
			  font-size: 42px;
			  font-weight: 400;
			  color: #2D2D2D;
		  }
	  }
	  .right{
		  image{
			  width: 180px;
			  height: 200px;
		  }
	  }
  }
  .cell_2{
	  margin: auto;
	  text-align: center;
	  font-size: 18px;
	  font-weight: 800;
	  color: #000000;
  }
  .cell_3{
	  margin: auto;
	  text-align: center;
	  font-size: 12px;
	  font-weight: 400;
	  color: #666666;
  }
	
	.cell_4{
		padding: 10px;
		.item{
			margin-top: 10px;
			height:120px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				margin: 10px;
				image{
					width: 50px;
					height: 50px;
				}
			}
			.middle{
				flex: 1;
				.text1{
					font-size: 16px;
					font-weight: bold;
				}
				.text2{
					font-size: 12px;
				}
			}
			.right{
				margin-right: 10px;
				.text1{
					border-radius: 5px;
					color: white;
					padding: 5px 10px;
					font-size: 14px;
				}
			}
		}
		.item_0{
			background: url(../../static/economy/bg_1.png); 
			background-size: 100% 100%;
		}
		.item_1{
			background: url(../../static/economy/bg_1.png); 
			background-size: 100% 100%;
		}
		.item_2{
			background: url(../../static/economy/bg_2.png); 
			background-size: 100% 100%;
		}
		.item_3{
			background: url(../../static/economy/bg_3.png); 
			background-size: 100% 100%;
		}
	}	
	

	.cell_5{
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #FE903D;
	}
	.cell_6{
		
		text-align: center;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		padding-bottom: 50px;
		text{
			color: firebrick;
		}
	}
</style>